const { mapState } = Vuex
export default {
  props: ["height"],
  template: `
    <el-container direction="vertical">
      <el-header :height="height" style="background:#ccc;line-height:50px;display:flex;justify-content: space-between;"> 
        <!-- Header content -->
        <div>简单的Vue权限控制学习</div>
        <el-button type="primary" size="default" @click="logout">{{username}} - 退出</el-button>
      </el-header>
      <el-container direction="horizontal">
        <el-aside width="200px">
          <slot name="menu"></slot>
        </el-aside>
        <el-container direction="vertical">
          <el-main height="">
            <slot name="main"></slot>
            <!-- Main content -->
          </el-main>
          <el-footer height="">
            <!-- Footer content -->

          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  `,
  methods: {
    logout() {
      this.$router.push('/login')
      // 删除ssesionStorage的数据
      sessionStorage.clear()
      // 移除Vuex中的数据
      /**
       * 1. 让Vuex重新加载 -> 当前界面刷新
       */
      window.location.reload()
    }
  },
  computed: {
    ...mapState(['username'])
  }
}